<template>
  <div class="h-full organization">
    <div class="flex organization-nav">
      <div
        @click="curIndex = index"
        :class="curIndex === index ? 'active' : ''"
        v-for="(item, index) in navList"
        :key="index"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="organization-content">
      <div class="search-form organization-from">
        <div class="contion">
          <div>
            <a-button
              @click="openAddModal"
              type="submit"
              class="add-parent-button"
              v-permission="
                '/systemConfig/organization/organization-add-organization'
              "
              >添加组织机构</a-button
            >
          </div>
          <div class="right">
            <a-input
              v-model:value.trim="searchValue"
              placeholder="请输入组织机构名称"
              v-filter-special-chars
            ></a-input>
            <a-button @click="filteredTreeData" type="submit" class="search">
              <template #icon>
                <SearchOutlined />
              </template>
            </a-button>
            <a-button @click="resetData" type="submit" class="refresh">
              <template #icon>
                <ReloadOutlined />
              </template>
            </a-button>
          </div>
        </div>
      </div>
      <a-spin :spinning="loading">
        <div v-if="!loading">
          <a-tree
            v-if="treeDataClone?.length"
            :defaultExpandAll="true"
            :blockNode="true"
            :tree-data="treeDataClone"
            :fieldNames="{ children: 'children', title: 'label', key: 'id' }"
            class="common-tree"
          >
            <template #title="{ label, id, parentId, remark, level }">
              <div class="flex justify-between">
                <div class="content-text">{{ label }}</div>
                <div class="flex text-button-area">
                  <a-button
                    @click="openAddChildModal(id)"
                    type="link"
                    class="common-text-button"
                    v-if="level < 5"
                    v-permission="'/systemConfig/organization/organization-add'"
                    >添加</a-button
                  >
                  <a-button
                    @click="openEditModal(id, label, parentId, remark)"
                    type="link"
                    class="common-text-button"
                    v-permission="
                      '/systemConfig/organization/organization-edit'
                    "
                    >修改</a-button
                  >
                  <a-button
                    @click="openDelModal(id)"
                    type="link"
                    class="delete del-text-button"
                    v-permission="
                      '/systemConfig/organization/organization-delete'
                    "
                    >删除</a-button
                  >
                </div>
              </div>
            </template>
          </a-tree>
          <a-empty v-else :image="simpleImage" />
        </div>
      </a-spin>
    </div>
  </div>
  <add-org
    ref="addOrgModal"
    :treeData="treeData"
    @isOk="isOk"
    :rootId="rootId"
    :isDataEmpty="isDataEmpty"
  />
</template>

<script setup lang="ts">
import type { TreeProps } from 'ant-design-vue'
import AddOrg from './AddOrgModal.vue'
import { onBeforeMount, ref } from 'vue'
import { getOrgTree } from '@/api/organization'
import type { OrgParams } from '@/api/model/organization'
import { Empty } from 'ant-design-vue'
import isEmpty from 'lodash/isEmpty'
import { cloneDeep } from 'lodash'
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons-vue'
const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE

const treeData = ref<TreeProps['treeData']>([])
const treeDataClone = ref<TreeProps['treeData']>([])
const loading = ref(false)

const rootId = ref()
const searchValue = ref('')
const isDataEmpty = ref(false)
const curIndex = ref(0)
const navList = [
  {
    name: '组织机构配置'
  }
]
const filteredTreeData = () => {
  if (!searchValue.value) {
    treeDataClone.value = cloneDeep(treeData.value)
    return
  }
  const filterTree = (data: any[]) => {
    return data.filter((node) => {
      const text = node.label

      // 不显示机构节点
      let nodeMatches
      // eslint-disable-next-line prefer-const
      nodeMatches = text.includes(searchValue.value)

      if (nodeMatches) {
        return true
      }

      if (node.children) {
        node.children = filterTree(node.children)
        return node.children.length > 0
      }

      return false
    })
  }

  treeDataClone.value = filterTree(cloneDeep(treeData.value) as any[])
}

const resetData = () => {
  searchValue.value = ''
  // filteredTreeData()
}
const getOrgTreeFun = async () => {
  loading.value = true
  getOrgTree()
    .then((res) => {
      treeData.value = addLevel(res)
      rootId.value = res[0]?.id
      loading.value = false
      if (isEmpty(treeData.value)) {
        isDataEmpty.value = true
      }
      treeDataClone.value = cloneDeep(treeData.value)
      treeData.value = addDisabled(treeData.value)
    })
    .catch(() => {
      treeData.value = []
      loading.value = false
    })
}
// 增加层级编号
const addLevel: any = (list: any[], parentLevel = 0) => {
  return list.map((item: any) => {
    return {
      ...item,
      level: parentLevel + 1,
      children: addLevel(item.children || [], parentLevel + 1)
    }
  })
}

// 增加禁用标识
const addDisabled: any = (list: any[]) => {
  return list.map((item: any) => {
    return {
      ...item,
      disabled: item.level >= 5,
      children: addDisabled(item.children || [])
    }
  })
}

onBeforeMount(() => {
  getOrgTreeFun()
})

// modal
const addOrgModal = ref()
const modalData = ref<OrgParams>()

// 添加组织机构
const openAddModal = () => {
  addOrgModal.value.setTreeData(treeData.value)
  addOrgModal.value.showModal('add')
}
// 添加子组织机构
const openAddChildModal = (id: string) => {
  modalData.value = {
    parentId: id,
    deptName: ''
  }
  addOrgModal.value.setTreeData(treeData.value)
  addOrgModal.value.showModal('addChild', modalData.value)
}
// 编辑组织机构
const openEditModal = async (
  deptId: string,
  deptName: string,
  parentId: string,
  remark: string
) => {
  addOrgModal.value.setTreeData(treeData.value)
  addOrgModal.value.showModal('edit', {
    deptId,
    parentId,
    deptName,
    remark
  })
}
// 删除组织机构
const openDelModal = (id: string) => {
  addOrgModal.value.setTreeData(treeData.value)
  addOrgModal.value.showModal('delete', { deptId: id })
}

const isOk = () => {
  getOrgTreeFun()
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
<style lang="less">
.ant-tree .ant-tree-treenode {
  padding: 0;
  margin-bottom: 7px;
}
</style>
